<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>come on!</div>
  <ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>凤梨</li>
  </ul>
  <script>
    // good,事件委托:内层元素做事件时冒泡到最外层元素.nodeName 属性指定节点的节点名称。 如果节点是元素节点,则 nodeName 属性返回标签名。 入股节点是属性节点,则 nodeName 属性返回属性的名称。 
    document.querySelector('ul').onclick = (event) => {
      let target = event.target
      let currenttarget = event.currentTarget

      if (target.nodeName === 'Li') {
        console.log(target.innerHTML)
      }
      console.log(target, currenttarget)
    }

    // bad
    // document.querySelectorAll('li').forEach((e) => {
    //   e.onclick = function () {
    //     console.log(this.innerHTML)
    //   }
    // })
    // 自定义事件
    const div = document.createElement('div') // 不创建元素，直接用 window 对象也可以
    const event = new Event('build')
    div.addEventListener('build', function (e) {
      console.log(111)
    })
    div.dispatchEvent(event)
  </script>
</body>

</html>